<%--
  Created by IntelliJ IDEA.
  User: XiongMM
  Date: 2019/7/29
  Time: 上午11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>注册页面</title>
    <style type="text/css">
        .pg_header{
            position: fixed;
            height: 48px;
            top: 0;
            left: 0;
            right: 0;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg_header .logo{
            margin: 0 auto;
            float: left;
            width: 200px;
            text-align: center;
            line-height: 48px;
            font-size: 28px;
            color: white;
        }
        .pg_dl{
            left: 400px;
            display: inline-block;
            padding: 0 40px;
            color: white;
        }
        .pg_header .pg_dl:hover{
            background-color: #2459fb;
            cursor: pointer;
        }
        .left{
            margin-top: 20px;
            width: 400px;
            display: inline-block;
            float: left;
        }
        .pg_body{
            margin-top: 50px;
            font-size: 18px;
            display: inline-block;
            width: 200px;
        }
        .pg_body .menu{
            width: 800px;
            padding: 15px;
            float: left;
            font-weight: bold;
        }
        input[type="text"]{
            width: 200px;
            height: 25px;
            border-radius: 6px;
        }
        input[type="password"]{
            width: 200px;
            height: 25px;
            border-radius: 6px;
        }
        input[type="button"]{
            background-color: #555555;
            border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        input[type="submit"]{
            background-color: #555555;
            border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .kong{
            margin-top: -54px;
            margin-left: 200px;
            float:left;
            padding: 15px;
        }
        .img{
            width: 50px;
            height: 40px;
        }
        .can{
            width: 1220px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            text-align: center;
            display: inline-block;
        }
        .tian{
            color: red;
            float: right;
            font-size: 12px;
            margin-right: -120px;
            margin-top: -25px;
        }
    </style>
</head>
<body id="i88" style="margin: 0">

<div class = "pg_header">
    <a class = "logo">LOGO</a>
    <a class="pg_dl" id="i77">注册</a>
</div>

<form name="tijiao" method="post" onsubmit="return check()" action="/servlet/final/updateuser">
    <div class="left"></div>
    <div class="pg_body">

        <input type="hidden" name="userName" value="${myuser.userName}"/>

        <div class="menu">真实姓名:</div>
        <div class="kong">
            <input id="true_name" type="text" name="trueName" value="${myuser.trueName}"/>
        </div>

        <div class="menu">性别:</div>
        <div class="kong" style="width:200px;">
            男<input type="radio" name="sex" value="1" ${myuser.sex == 1 ? 'checked' : ''}/>
            女<input type="radio" name="sex" value="2" ${myuser.sex == 2 ? 'checked' : ''}/>
        </div>

        <div class="menu">年龄:</div>
        <div class="kong">
            <input type="text" name="age" value="${myuser.age}" readonly/>
            <span id="age_span" class="tian" style="margin-top: -25px">*(为必填)</span>
        </div>

        <div class="menu">电话号码:</div>
        <div class="kong">
            <input id="phone" type="text" name="phone" value="${myuser.phone}"/>
        </div>

        <div class="menu">邮箱地址:</div>
        <div class="kong">
            <input id="email" type="text" name="email" value="${myuser.email}"/>
            <span id="email_span" class="tian">*(为必填)</span>
        </div>

        <div class="menu">爱好:</div>
        <div class="kong" style="width: 300px;">
            撩妹 <input type="checkbox" name="bobby" value="跑步" ${myuser.hobbys.contains("撩妹") eq true ? 'checked':''}/>
            写代码 <input type="checkbox" name="bobby" value="游泳" ${myuser.hobbys.contains("写代码") eq true ? 'checked':''}/>
            篮球 <input type="checkbox" name="bobby" value="篮球" ${myuser.hobbys.contains("篮球") eq true ? 'checked':''}/>
            足球 <input type="checkbox" name="bobby" value="足球" ${myuser.hobbys.contains("足球") eq true ? 'checked':''}/>

            <%--撩妹 <input type="checkbox" value="撩妹" name="hobby"--%>
                <%--<c:forEach var="str" items="${myuser.hobbys}">--%>
                    <%--<c:if test="${str == '撩妹'}">--%>
                        <%--checked--%>
                    <%--</c:if>--%>
                <%--</c:forEach>--%>
            <%--/>--%>
            <%--写代码 <input type="checkbox" value="写代码" name="hobby"--%>
                <%--<c:forEach var="str" items="${myuser.hobbys}">--%>
                    <%--<c:if test="${str == '写代码'}">--%>
                        <%--checked--%>
                    <%--</c:if>--%>
                <%--</c:forEach>--%>
            <%--/>--%>
            <%--篮球 <input type="checkbox" value="篮球" name="hobby"--%>
                <%--<c:forEach var="str" items="${myuser.hobbys}">--%>
                    <%--<c:if test="${str == '篮球'}">--%>
                        <%--checked--%>
                    <%--</c:if>--%>
                <%--</c:forEach>--%>
            <%--/>--%>
            <%--足球 <input type="checkbox" value="足球" name="hobby"--%>
                <%--<c:forEach var="str" items="${myuser.hobbys}">--%>
                    <%--<c:if test="${str == '足球'}">--%>
                        <%--checked--%>
                    <%--</c:if>--%>
                <%--</c:forEach>--%>
            <%--/>--%>
        </div>

        <div class="menu">个人签名:</div>
        <div class="kong">
                    <textarea name="signature" style="width: 280px;height: 40px;">
                        ${myuser.signature}
                    </textarea>
        </div>
    </div>

    <div class="can">
        <input id="i111" type="submit" name="002" value="点我修改" onclick="check();">
        <p style="width: 200px;display: inline-block;"></p>
    </div>

</form>

<script type="text/javascript">

    //邮箱验证
    function checkEmail(){
        var div = document.getElementById("email_span");
        div.innerHTML = "";
        var email = document.tijiao.email.value;
        var sw = email.indexOf("@", 0);
        var sw1 = email.indexOf(".", 0);
        var tt = sw1 - sw;
        if (email.length === 0) {
            div.innerHTML = "邮箱不能为空";
            document.tijiao.email.focus();
            return false;
        }

        if (email.indexOf("@", 0) === -1) {
            div.innerHTML = "必须包含@符号";
            document.tijiao.email.select();
            return false;
        }

        if (email.indexOf(".", 0) === -1) {
            div.innerHTML = "必须包含.符号";
            document.tijiao.email.select();
            return false;
        }

        if (tt === 1) {
            div.innerHTML = "@和.不能一起";
            document.tijiao.email.select();
            return false;
        }

        if (sw > sw1) {
            div.innerHTML  = "@符号必须在.之前";
            document.tijiao.email.select();
            return false;
        } else {
            return true;
        }
    }

    function checkAge() {
        var div = document.getElementById("age_span");
        div.innerHTML = "";
        var age = document.tijiao.age.value;
        if (age === "") {
            div.innerHTML = "年龄不能为空";
            document.tijiao.age.focus();
            return false;
        }
        if (isNaN(age)) {
            div.innerHTML = "年龄必须是数字";
            document.tijiao.age.select();
            return false;
        }
        if(age<=0 || age >= 150){
            div.innerHTML = "年龄必须在[1,150)";
            document.tijiao.age.select();
            return false;
        }
        return true;
    }

    function check(){
        return !!(checkAge() && checkEmail());
    }

</script>
</body>
</html>
